<!-- 文件列表网格布局item license by http://eleadmin.com -->
<template>
  <div :class="['ele-file-list-item', { checked: checked }]" @click="itemClick">
    <!-- item body -->
    <div class="ele-file-list-item-body">
      <!-- 图标 -->
      <div class="ele-file-list-item-icon">
        <img
          :src="icon"
          :alt="item.name"
          :class="{ 'ele-file-list-item-icon-image': item.thumbnail }"
        />
      </div>
      <!-- 标题 -->
      <div class="ele-file-list-item-title ele-text-primary" :title="item.name">
        {{ item.name }}
      </div>
    </div>
    <!-- 复选框 -->
    <div
      v-if="checkbox"
      class="ele-file-list-item-check ele-bg-white"
      @click.stop="itemCheckChange"
    >
      <i class="ele-file-icon-check ele-bg-primary"></i>
    </div>
    <!-- 背景和边框 -->
    <div class="ele-file-list-item-bg ele-bg-primary"></div>
    <div class="ele-file-list-item-border ele-border-primary"></div>
  </div>
</template>

<script>
  export default {
    name: 'EleFileGridItem',
    emits: ['item-click', 'item-check-change'],
    props: {
      // item数据
      item: {
        type: Object,
        required: true
      },
      // 是否显示复选框
      checkbox: Boolean,
      // 选中数据
      selection: Array,
      // 后缀对应的图标
      icons: {
        type: Array,
        required: true
      }
    },
    computed: {
      // 是否选中
      checked() {
        return (
          Array.isArray(this.selection) && this.selection.includes(this.item)
        );
      },
      // 对应图标
      icon() {
        // 网格模式文件有缩略图返回文件缩略图
        if (this.item.thumbnail) {
          return this.item.thumbnail;
        }
        // 文件夹
        if (this.item.isDirectory) {
          const temp = this.icons.find((d) => d.type === 'dir');
          return temp?.icon;
        }
        // 匹配后缀对应的图标
        let ic;
        this.icons.forEach((d) => {
          if (d.types) {
            d.types.forEach((s) => {
              if (this.item.name.endsWith(s)) {
                ic = d.icon;
              }
            });
          }
        });
        if (!ic) {
          const temp = this.icons.find((d) => d.type === 'file');
          ic = temp?.icon;
        }
        return ic;
      }
    },
    methods: {
      /* item点击事件 */
      itemClick() {
        this.$emit('item-click', this.item);
      },
      /* item复选框点击事件 */
      itemCheckChange() {
        this.$emit('item-check-change', this.item);
      }
    }
  };
</script>

<style lang="scss">
  // 文件列表网格布局item
  .ele-file-list-item {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 3px 10px 3px;
    margin: 0 0 8px 8px;
    text-align: center;
    position: relative;
    cursor: pointer;

    // body
    .ele-file-list-item-body {
      position: relative;
      z-index: 1;
    }

    // 图标
    .ele-file-list-item-icon {
      position: relative;

      & > img {
        width: 56px;
        height: 56px;
        margin: 14px 0;
        border-radius: 2px;
        display: inline-block;
      }

      & > .ele-file-list-item-icon-image {
        margin: 0;
        width: 84px;
        height: 84px;
        object-fit: cover;
      }
    }

    // 标题
    .ele-file-list-item-title {
      width: 110px;
      margin-top: 4px;
      box-sizing: border-box;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;

      &:not(:hover) {
        color: inherit;
      }
    }

    // 复选框
    .ele-file-list-item-check {
      position: absolute;
      top: 6px;
      right: 6px;
      border-radius: 50%;
      display: none;
      z-index: 1;

      .ele-file-icon-check {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        display: block;
        opacity: 0.35;
      }
    }

    &.checked .ele-file-list-item-check,
    &:hover .ele-file-list-item-check {
      display: block;
    }

    &.checked .ele-file-list-item-check .ele-file-icon-check {
      opacity: 1;
    }

    // 背景和边框
    .ele-file-list-item-bg,
    .ele-file-list-item-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      box-sizing: border-box;
      display: none;
    }

    &:hover .ele-file-list-item-bg,
    &.checked .ele-file-list-item-bg {
      opacity: 0.06;
      display: block;
    }

    &.checked .ele-file-list-item-border {
      opacity: 0.3;
      border-width: 1px;
      border-style: solid;
      display: block;
    }
  }
</style>
